<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'

import * as echarts from 'echarts';

// import function to register Swiper custom elements
import { register } from 'swiper/element/bundle';
// register Swiper custom elements
interface InState {
    /** 数据状态 */
    loading: boolean;
    /** 加仓情况数据状态 */
    loadingFurnaces: boolean;
    /** 煤场数据状态 */
    loadingBunkers: boolean;
    /** 预警数据状态 */
    loadingWarnings: boolean;
    /** 设备状态数据状态 */
    loadingDevice: boolean;
}

register();
/** 数据 */
let state = ref<InState>({
    loading: false,
    loadingFurnaces: false,
    loadingBunkers: false,
    loadingWarnings: false,
    loadingDevice: false,
})
const deviceStateTabs = ['全部','报警']
const deviceStateIndex = ref(0)
function clickDeviceStateTabs(index:number){
    deviceStateIndex.value = index
}

const pieChart = ref<echarts.ECharts | null>(null);

function initChart(){
    // 图表
    pieChart.value = echarts.init(document.getElementById('pieChart'));
    pieChart.value.setOption({
        color:['#2A6FD9','#E04940','#FAB823'],
        title: {
            text: '运行情况',
            left: '27%',
            bottom: '10px',
            textStyle:{
                fontSize: 15
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            right: '18%',
            top: '16%',
            icon: 'circle',
            itemGap: 24,
            itemWidth: 10
        },
        series: [
            {
                type: 'pie',
                radius: '70%',
                center: ['36%', '40%'],
                label:{
                    show:false
                },
                data: [
                    { value: deviceStatusData.value.workingCount, name: '正常' },
                    { value: deviceStatusData.value.warningCount, name: '报警' },
                    { value: deviceStatusData.value.downCount, name: '停机' }
                ],
            }
        ]
    })

}


import { furnaces, JinhaocunByMonth, JinhaocunByDate, JinhaocunByBunkerType, deviceStatus, warningsHowMany,DeviceWarnInfoStatus,bunkersInfo } from "@/api";

const furnacesData = ref<any>({})
const getFurnaces = () => {
    state.value.loadingFurnaces = true;
    furnaces().then((res:any)=>{
        console.log('加仓情况----',res.data)
        furnacesData.value = res.data
    }).finally(() => {
        state.value.loadingFurnaces = false;
    })
}

// 煤场信息
const bunkersData = ref<any>({})
const getBunkersInfo = () => {
    state.value.loadingBunkers = true;
    bunkersInfo().then((res:any)=>{
        console.log('煤场信息----',res.data)
        bunkersData.value = res.data
    }).finally(() => {
        state.value.loadingBunkers = false;
    })
}

// 设备状态
const deviceStatusData = ref<any>({})
const getDeviceStatus = () => {
    state.value.loadingDevice = true;
    deviceStatus().then((res:any)=>{
        console.log('设备状态----',res.data)
        deviceStatusData.value = res.data
        initChart()
    }).finally(() => {
        state.value.loadingDevice = false;
    })
}

// 预警情况
const warningsData = ref<any>({})
const getWarningsHowMany = () => {
    state.value.loadingWarnings = true;
    warningsHowMany().then((res:any)=>{
        console.log('预警情况----',res.data.devices)
        warningsData.value = res.data.devices
    }).finally(() => {
        state.value.loadingWarnings = false;
    })
}

// 更新--预警情况
const handleDialogVisible = ref(false)
const addForm = ref({
    status: '',
    remark:'',
})

const sId = ref('')
const submitStatus = () => {
    if(!addForm.value.status){
        ElMessage.error('请选择处理结果')
        return
    }
    DeviceWarnInfoStatus({
        id: sId.value,
        status: Number(addForm.value.status),
        remark: addForm.value.remark
    }).then(res=>{
        console.log('修改----',res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '处理成功',
            })
            handleDialogVisible.value = false
            getWarningsHowMany()
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}

// 忽略
const ignore = (id:any) => {
    DeviceWarnInfoStatus({
        id: id,
        status: 2
    }).then(res=>{
        console.log('修改----',res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '已忽略',
            })
            getWarningsHowMany()
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}

onMounted(() => {
    //initChart()
    getFurnaces()
    getBunkersInfo()
    getWarningsHowMany()
    getDeviceStatus()
    
});
onUnmounted(() => {
    
    if (pieChart.value) {
        pieChart.value.dispose();
    }
})

</script>

<template>

    <!-- 弹出框/处理 -->
    <el-dialog v-model="handleDialogVisible" title="处理" width="500" :align-center="true">
        <div class="dialog_main">
            <el-form :inline="true" :model="addForm" class="mt15 form-inline-row-two" label-width="auto">
                <el-form-item label="处理结果:">
                    <el-select v-model="addForm.status" placeholder="请选择">
                        <el-option label="未解决" value="3" />
                        <el-option label="已解决" value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注:" style="width: 92%;">
                    <el-input v-model="addForm.remark" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" placeholder="请输入" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="submitStatus">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <div class="home_flex">
        <div class="home_bor w400" v-loading="state.loadingDevice">
            <div class="home_title">
                输煤程控设备状态
                <img src="../assets/img/ico_r.png" alt="">
            </div>

            <!-- chart -->
            <div class="chart_main" id="pieChart"></div>

            <ul class="device_state_tabs">
                <li v-for="(item,index) in deviceStateTabs" :class="deviceStateIndex == index?'hover':''" @click="clickDeviceStateTabs(index)">{{ item }}</li>
            </ul>
            <ul v-if="deviceStateIndex == 0" class="device_state_list">
                <li class="item_title">
                    <strong>设备名称</strong>
                    <span>运行时长</span>
                    <p>运行状态</p>
                </li>
                <li class="item" v-for="(item,index) in deviceStatusData.devices" :key="index">
                    <strong>{{ item.name }}</strong>
                    <span>{{ item.runTime }}</span>
                    <p v-if="item.status == 'Running'" class="green"><i class="ico_green"></i>{{ item.statusDes }}</p>
                    <p v-if="item.status == 'PowerOff'" class="red"><i class="ico_red"></i>{{ item.statusDes }}</p>
                </li>
            </ul>
            <ul v-if="deviceStateIndex == 1" class="device_state_list">
                <li class="item_title">
                    <strong>设备名称</strong>
                    <span>运行时长</span>
                    <p>运行状态</p>
                </li>
                <template v-for="(item,index) in deviceStatusData.devices" :key="index">
                    <li v-if="item.status === 'PowerOff'" class="item">
                        <strong>{{ item.name }}</strong>
                        <span>{{ item.runTime }}</span>
                        <p v-if="item.status == 'Running'" class="green"><i class="ico_green"></i>{{ item.statusDes }}</p>
                        <p v-if="item.status == 'PowerOff'" class="red"><i class="ico_red"></i>{{ item.statusDes }}</p>
                    </li>
                </template>
            </ul>

        </div>

        <!-- 中 -->
        <div class="home_bor gailan" v-loading="state.loadingBunkers">
            <div class="home_title">
                煤场概览
                <img src="../assets/img/ico_r.png" alt="">
            </div>

            <ul class="gailan_nav">
                <li>
                    <img src="../assets/img/ico_g1.png" alt="">
                    <p>
                        <span>总存煤量(吨)</span>
                        <strong>{{ bunkersData.coalTotalStored }}</strong>
                    </p>
                </li>
                <li>
                    <img src="../assets/img/ico_g2.png" alt="">
                    <p>
                        <span>今日进煤量(吨)</span>
                        <strong>{{ bunkersData.coalTakenInToday }}</strong>
                    </p>
                </li>
                <li>
                    <img src="../assets/img/ico_g3.png" alt="">
                    <p>
                        <span>今日耗煤量(吨)</span>
                        <strong>{{ bunkersData.coalCostToday }}</strong>
                    </p>
                </li>
                <li>
                    <img src="../assets/img/ico_g4.png" alt="">
                    <p>
                        <span>存煤可用(天)</span>
                        <strong>{{ bunkersData.availableDays }}</strong>
                    </p>
                </li>
            </ul>

            
            <div class="overview">
                <swiper-container
                    :slides-per-view="2"
                    :space-between="20"
                    :pagination="true"
                >
                    <swiper-slide v-for="(item,index) in bunkersData.bunkers" :key="index">
                        <div class="overview_item">
                            <h3>{{ item.name }}</h3>
                            <div class="overview_3d">
                                <img src="../assets/img/ph_3d.jpg" alt="">
                            </div>
                            <ul class="overview_info">
                                <li>
                                    <p>
                                        <strong>{{ item.coalTotalStored }}</strong>吨
                                    </p>
                                    <p><img src="../assets/img/ico_25.png" alt="">总存煤量</p>
                                </li>
                                <li class="overview_line"></li>
                                <li>
                                    <p>
                                        <strong>{{ item.coalCostToday }}</strong>吨
                                    </p>
                                    <p><img src="../assets/img/ico_26.png" alt="">今日耗煤量</p>
                                </li>
                                <li class="overview_line"></li>
                                <li>
                                    <p>
                                        <strong>{{ item.coalTakenInToday }}</strong>吨
                                    </p>
                                    <p><img src="../assets/img/ico_27.png" alt="">今日进煤量</p>
                                </li>
                            </ul>
                        </div>
                    </swiper-slide>
                </swiper-container>
                
               
            </div>

        </div>

        <!-- 右 -->
        <div class="home_bor w330" v-loading="state.loadingWarnings">
            <div class="home_title">
                预警情况
                <img src="../assets/img/ico_r.png" alt="">
            </div>
            <ul class="warning">
                <li v-for="(item,index) in warningsData" :key="index">
                    <div class="title">
                        <img src="../assets/img/ico_24.png" alt="">
                        <div class="info">
                            <strong>{{ item.text }}</strong>
                            <span>{{ item.occurTime }}</span>
                        </div>
                    </div>
                    <p>
                        {{ item.message }}
                    </p>
                    <div class="btn">
                        <el-button @click="ignore(item.id)" color="#EDF4FF" round size="small" style="color: #2565C8;">忽略</el-button>
                        <el-button @click="handleDialogVisible = true,sId = item.id" color="#E04940" round size="small">处理</el-button>
                    </div>
                </li>
                
            </ul>

        </div>
    </div>
    
    <div class="home_bor mt15" v-loading="state.loadingFurnaces" element-loading-text="数据加载中……">
        <div class="home_title">
            加仓情况
            <img src="../assets/img/ico_r.png" alt="">
        </div>
        <div class="stove_felx">

            <div class="stove_unit">
                <div class="title">累计加仓量(吨)</div>
                <div class="stove_unit_green">{{ furnacesData.warningThresholds?.high }}</div>
                <div class="stove_unit_red">{{ furnacesData.warningThresholds?.low }}</div>
                <div class="stove_unit_jw">
                    <p>A料位计</p>
                    <p>B料位计</p>
                </div>
            </div>
        
            <div class="stove_item" v-for="(item,index) in furnacesData.coalFurnaces" :key="index">
                <div class="stove_item_title">
                    <strong>{{ item.name }}</strong>
                    (累计加仓{{ item.totalSummary.toFixed(2) }}吨）
                </div>
                <div class="stove_item_felx">
                    <div class="stove_item_box" v-for="(itema,indexa) in item.units" :key="indexa">
                        <div class="stove_item_num">{{ itema.totalSummary.toFixed(0) }}</div>
                        <div class="stove_item_bg">
                            <div class="item_bar" v-for="(itemb,indexb) in itema.repositories" :key="indexb">
                                <div class="item_bar_name">{{ itemb.name }}</div>
                                <div class="item_bar_cont " :class="{
                                    'bar_yellow': itemb.value > furnacesData.warningThresholds?.high,
                                    'bar_red': itemb.value > 0 && itemb.value < furnacesData.warningThresholds?.low,
                                    'bar_black': itemb.value >= furnacesData.warningThresholds?.low&&itemb.value <= furnacesData.warningThresholds?.high,
                                    }" :style="'height:'+itemb.value.toFixed(2)*8.3+'px'"></div>
                            </div>
                        </div>
                        <div class="stove_item_name">{{ itema.name }}</div>
                        <div class="stove_item_info">
                            <p v-for="(itemb,indexb) in itema.repositories" :key="indexb">{{ itemb.name }}:{{ itemb.value.toFixed(2) }}</p>
                        </div>
                    </div>

                    <!-- <div class="stove_item_box">
                        <div class="stove_item_num">470</div>
                        <div class="stove_item_bg">
                            <div class="item_bar">
                                <div class="item_bar_name">A</div>
                                <div class="item_bar_cont bar_red" style="height: 15px;"></div>
                            </div>
                            <div class="item_bar">
                                <div class="item_bar_name">B</div>
                                <div class="item_bar_cont bar_black" style="height: 75px;"></div>
                            </div>
                        </div>
                        <div class="stove_item_name">1A</div>
                        <div class="stove_item_info">
                            <p class="red">A:8.73</p>
                            <p class="yellow">B:6.2</p>
                        </div>
                    </div>
                    <div class="stove_item_box">
                        <div class="stove_item_num">470</div>
                        <div class="stove_item_bg">
                            <div class="item_bar">
                                <div class="item_bar_name">A</div>
                                <div class="item_bar_cont bar_yellow" style="height: 90px;"></div>
                            </div>
                            <div class="item_bar">
                                <div class="item_bar_name">B</div>
                                <div class="item_bar_cont bar_yellow" style="height: 105px;"></div>
                            </div>
                        </div>
                        <div class="stove_item_name">1A</div>
                        <div class="stove_item_info">
                            <p class="red">A:8.73</p>
                            <p class="yellow">B:6.2</p>
                        </div>
                    </div>
                    <div class="stove_item_box">
                        <div class="stove_item_num">470</div>
                        <div class="stove_item_bg">
                            <div class="item_bar">
                                <div class="item_bar_name">A</div>
                                <div class="item_bar_cont bar_black" style="height: 75px;"></div>
                            </div>
                            <div class="item_bar">
                                <div class="item_bar_name">B</div>
                                <div class="item_bar_cont bar_black" style="height: 45px;"></div>
                            </div>
                        </div>
                        <div class="stove_item_name">1A</div>
                        <div class="stove_item_info">
                            <p class="red">A:8.73</p>
                            <p class="yellow">B:6.2</p>
                        </div>
                    </div>
                    <div class="stove_item_box">
                        <div class="stove_item_num">470</div>
                        <div class="stove_item_bg">
                            <div class="item_bar">
                                <div class="item_bar_name">A</div>
                                <div class="item_bar_cont bar_red" style="height: 35px;"></div>
                            </div>
                            <div class="item_bar">
                                <div class="item_bar_name">B</div>
                                <div class="item_bar_cont bar_black" style="height: 75px;"></div>
                            </div>
                        </div>
                        <div class="stove_item_name">1A</div>
                        <div class="stove_item_info">
                            <p class="red">A:8.73</p>
                            <p class="yellow">B:6.2</p>
                        </div>
                    </div>
                    <div class="stove_item_box">
                        <div class="stove_item_num">470</div>
                        <div class="stove_item_bg">
                            <div class="item_bar">
                                <div class="item_bar_name">A</div>
                                <div class="item_bar_cont bar_yellow" style="height: 90px;"></div>
                            </div>
                            <div class="item_bar">
                                <div class="item_bar_name">B</div>
                                <div class="item_bar_cont bar_yellow" style="height: 105px;"></div>
                            </div>
                        </div>
                        <div class="stove_item_name">1A</div>
                        <div class="stove_item_info">
                            <p class="red">A:8.73</p>
                            <p class="yellow">B:6.2</p>
                        </div>
                    </div> -->

                </div>
            </div>

    </div>

    </div> 
</template>
<style scoped lang="scss">

.overview{
    width: calc(100vw - 992px);
    padding:15px 20px 0;
    .overview_item{
        background: #fff;
        padding: 20px;
        margin-bottom: 30px;
        h3{
            font-weight: bold;
            font-size: 20px;
            color: #3D4755;
        }
    }
    .overview_3d{
        width: 220px;
        height: 220px;
        margin: 10px auto 0;
        img{
            display: block;
            width: 220px;
            height: 220px;
            object-fit: cover;
        }
    }
    .overview_info{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 40px;
        li{
            width: 100%;
            color: #677581;
            &:first-child{
                border:none;
            }
            &.overview_line{
                width: 0;
                height: 50px;
                border-left: 1px solid #E0E5ED;
                margin-right: 20px;
            }
            strong{
                font-weight: bold;
                font-size: 18px;
                color: #3D4755;
                line-height: 20px;
                padding-right: 5px;
            }
            p{
                display: flex;
                align-items: center;
                padding:5px 0;
                img{
                    width: 16px;
                    margin-right: 5px;
                }
            }
        }
    }
}
.stove_felx{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    padding-bottom: 30px;
    position: relative;
    height: 325px;
    &::before{
        content: '';
        position: absolute;
        left:100px;
        top:35%;
        right: 0;
        border-top:1px dashed #999;
    }
    &::after{
        content: '';
        position: absolute;
        left:100px;
        top:200px;
        right: 0;
        border-top:1px dashed #999;
    }
}
.stove_unit{
    padding-left: 30px;
    margin-top: 45px;
    position: relative;
    .title{
        font-weight: bold;
        font-size: 12px;
        color: #1F2E40;
        line-height: 18px;
        text-align: center;
        height: 36px;
    }
    .stove_unit_jw{
        position: absolute;
        right: -25px;
        bottom: 0;
        padding:4px 5px;
        font-size: 12px;
        color: #1F2E3F;
        line-height: 14px;
        font-weight: bold;
    }
    .stove_unit_green{
        position: absolute;
        right: 15px;
        bottom: 170px;
        width: 60px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        color:#fff;
        background: url('../assets/img/ico_s1.png') no-repeat;
        font-size: 13px;
        padding-right: 10px;
        margin-top: 20px;
    }
    .stove_unit_red{
        position: absolute;
        right:15px;
        bottom: 85px;
        width: 60px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        color:#fff;
        background: url('../assets/img/ico_s2.png') no-repeat;
        font-size: 13px;
        padding-right: 10px;
        margin-top: 65px;
    }

}
.stove_item{
    text-align: center;
    margin-left: 30px;
    .stove_item_title{
        text-align: center;
        font-size: 14px;
        color: #667581;
        line-height: 20px;
        padding-bottom: 20px;
        strong{
            font-weight: bold;
            font-size: 18px;
            color: #2565C8;
            line-height: 20px;
        }
    }
    
    .stove_item_felx{
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        height: 254px;
    }
    .stove_item_box{
        width: 50px;
        margin: 0 5px;
        .stove_item_num{
            height: 22px;
            background: #8D95A2;
            box-shadow: 2px 2px 5px 1px rgba(4,50,123,0.16);
            font-weight: 400;
            font-size: 13px;
            color: #FFFFFF;
            line-height: 22px;
            border-radius: 3px;
            position: relative;
            &::after{
                content: '';
                position: absolute;
                left:50%;
                bottom: -5px;
                margin-left: -5px;
                width: 0;
                height: 0;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-top: 8px solid #8D95A2;
            }
        }
        .stove_item_name{
            font-weight: 500;
            font-size: 14px;
            color: #3D4755;
            line-height: 24px;
        }
        .stove_item_info{
            background: #FFFFFF;
            box-shadow: 0px 0px 2px 1px rgba(4,50,123,0.16);
            text-align: left;
            padding:4px 5px;
            font-size: 12px;
            color: #1F2E3F;
            line-height: 14px;
        }
    }
    .stove_item_bg{
        width: 50px;
        height: 160px;
        background: url('../assets/img/ico_s_bg.png') no-repeat;
        background-size: 100% 100%;
        margin-top: 12px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding: 0 8px 28px;
        .item_bar_name{
            text-align: center;
            color:#fff;
            font-size: 13px;
            line-height: 20px;
        }
        .item_bar_cont{
            width: 14px;
            min-height: 5px;
            position: relative;
            border-radius:0 0 3px 3px;
            &.bar_yellow{
                background: linear-gradient( 270deg, #C8851B 0%, #E2AD33 18%, #F2CE8A 48%, #E2AD33 73%, #C8851B 100%);
            }
            &.bar_red{
                background: linear-gradient( 270deg, #5A1F1A 0%, #CB3A30 18%, #F2685F 48%, #CB3A30 80%, #5A1F1A 100%);
            }
            &.bar_black{
                background: linear-gradient( 270deg, #080933 0%, #1C1E43 18%, #2D3653 48%, #1C1E43 80%, #0D0E2F 100%);
            }
            &::before{
                content: '';
                position: absolute;
                left: 0;
                top:-2px;
                right: 0;
                width: 14px;
                height: 4px;
                border-radius: 50%;
            }
            &.bar_yellow::before{
                background: linear-gradient( 180deg, #C9881E 0%, #F8CE6F 100%);
            }
            &.bar_red::before{
                background: linear-gradient( 180deg, #7C1309 0%, #F5665A 100%);
            }
            &.bar_black::before{
                background: linear-gradient( 180deg, #1C213E 0%, #3B405D 100%);
            }
        }
    }
}
.gailan_nav{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding:0 20px;
    li{
        width: 100%;
        height: 95px;
        margin-left: 10px;
        background: url('../assets/img/ico_g_bg.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:0 15px 0 20px;
        &:first-child{
            margin: 0;
        }
        img{
            width: 64px;
            flex-shrink: 0;
            margin-right: 15px;
        }
        p{
            width: 100%;
            span{
                font-size: 15px;
                color: #1F2E3F;
                line-height: 20px;
            }
            strong{
                display: block;
                font-weight: bold;
                font-size: 24px;
                color: #1F2E3F;
                line-height: 24px;
                margin-top: 8px;
            }
        }
    }
}
.device_state_list{
    padding:0 20px;
    font-size: 14px;
    .item_title{
        height: 40px;
        background: #F4F5F5;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #E0E5ED;
        margin-top: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:0 10px;
        color: #677581;
        strong{
            width: 50%;
            font-weight: normal;
        }
        span{
            width: 25%;
        }
        p{
            width: 25%;
            text-align: right;
        }
    }
    .item{
        height: 40px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #E0E5ED;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:0 10px;
        margin-top: 8px;
        color: #3D4755;
        strong{
            width: 50%;
            font-weight: normal;
        }
        span{
            width: 25%;
        }
        p{
            width: 25%;
            text-align: right;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 5px;
            i{
                flex-shrink: 0;
                display: block;
                width: 10px;
                height: 10px;
                
                border-radius: 50%;
                margin-right: 5px;
                &.ico_green{
                    background: #07E03A;
                }
                &.ico_red{
                    background: #F04F4E;
                }
            }
        }
    }
}
.chart_main{
    width: 100%;
    height: 180px;
}
.device_state_tabs{
    padding:0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    li{
        width: 170px;
        height: 40px;
        line-height: 40px;
        background: #D6564D;
        box-shadow: 0px 0px 2px 1px rgba(4,50,123,0.16);
        border-radius: 6px 6px 6px 6px;
        text-align: center;
        font-size: 15px;
        color: #FFFFFF;
        position: relative;
        cursor: pointer;
        &.hover{
            background: #2565C8;
            &::after{
                content: '';
                position: absolute;
                z-index: 9;
                left: 50%;
                bottom: -6px;
                margin-left: -10px;
                width: 0;
                height: 0;
                border-left: 10px solid transparent; /* 左边透明边框 */
                border-right: 10px solid transparent; /* 右边透明边框 */
                border-top: 10px solid #2565C8;
            }
        }
    }
}
.warning{
    padding:0 20px 5px;
    li{
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #E7EBF0;
        margin-bottom: 15px;
        padding:15px;
        .btn{
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-top: 10px;
        }
        .title{
            display: flex;
            align-items: center;
            padding-bottom: 10px;
            border-bottom:1px solid #E7EBF1;
            margin-bottom: 5px;
            strong{
                display: block;
                font-weight: bold;
                font-size: 16px;
                color: #3D4755;
                line-height: 18px;
            }
            span{
                display: block;
                font-size: 13px;
                color: #9EA6B4; 
                line-height: 14px;
                margin-top: 4px;
            }
            img{
                flex-shrink: 0;
                width: 36px;
                margin-right: 10px;
            }
        }
        p{
            font-size: 14px;
            color: #677581;
            line-height: 22px;
            height: 44px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            white-space: normal;
        }
    }
}
.home_flex{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}
.home_bor{
    background: linear-gradient( 180deg, #FAFDFF 0%, #EEF4FE 100%);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #E1E5ED;
}
.home_title{
    display: flex;
    align-items: center;
    padding:20px 20px;
    font-weight: bold;
    font-size: 20px;
    color: #092A5F;
    line-height: 20px;
    img{
        margin-left: 8px;
    }
}
.w330{
    width: 330px;
    flex-shrink: 0;
}
.w400{
    width: 400px;
    flex-shrink: 0;
}
.gailan{
    width: 100%;
    margin: 0 15px;
}
</style>